/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {Icon, TextareaItem } from 'antd-mobile-rn';

// project
import {
    Page, Content, Text, Image, ItemY, Row, Header, Footer, Hand,TouchOpacity,Between

} from '../../../library'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OnlineMessage extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
		this.state = {
            // 控制点击反馈输入框后的显隐
			show: false
		};
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 点击我要反馈 通过 状态显隐 确认与取消
     */
    onshow=()=>{
        this.setState({
            show: true
        })
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>

				{/* 内容部分 */}
				<Content my='40' bg='#efeff4'>

                    {/* 咨询者 */}
                    <Row x='right' mt='20' mr='10'>
                        <Text bg='#96e154' pa='10' mr='5' w='260' ra='5'>物业费怎么交不了啊啊啊啊啊啊啊啊？</Text>
                        <Image source={require('../../../assets/header.jpg')} w='40' h='40' ra='200'/>
                    </Row>

                    {/* 客服 */}
                    <Row mt='20' ml='10'>
                        <Image source={require('../../../assets/header.jpg')} w='40' h='40' ra='200'/>
                        <Text bg='#fff' pa='10' ml='5' w='260' ra='5'>您好，很高兴为您服务</Text>
                    </Row>

				</Content>
				

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>在线留言</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}

				{/* 底部输入信息部分 */}
				<Footer bg='#fff' py='8'>
                    <Row x='center'>
                        <ItemY>

                            {/* 点击反馈框显示出来的确认与取消 */}
                            {this.state.show == true && <Between mb='14'>
                                <Hand f='1' x='left'><Text color='#26c75e'>取消</Text></Hand>
                                <Hand f='1' x='center'><Text>咨询反馈</Text></Hand>
                                <Hand f='1' x='right'><Text color='#26c75e'>确认</Text></Hand>
                            </Between>
                            }

                            {/* 我要反馈的多行输入框 */}
                            <TextareaItem
                                placeholder='我要咨询反馈'
                                style={{width:310,borderColor:'#f0f0f0', borderTopWidth:1, borderLeftWidth:1, borderRightWidth:1, borderRadius:5,fontSize:14}}
                                autoHeight
                                onFocus={this.onshow}
                            ></TextareaItem>
                        </ItemY>
                    </Row>
                </Footer>

			</Page>
		);
	}
}
